{% stylesheet %}
  @media screen and (min-width: 768px) {
    .pc_height {
      height: var(--pc-height);
    }
    .pc_height iframe {
      width: 100%;
      height: 300%;
      position: absolute;
      top: -100%;
    }
  }

  @media screen and (max-width: 767px) {
    .mobile_height {
      height: var(--mobile-height);
    }
    .mobile_height iframe {
      width: 300%;
      height: 100%;
      position: absolute;
      left: -100%;
    }
  }

  .block_video_image_text {
    position: relative;
  }

  .block_video_image_text .block_video_content {
    height: 100%;
    overflow: hidden;
    position: relative;
  }
  .block_video_image_text .custom_video {
    width: 100%;
	  height: 100%;
    object-fit: cover;
    display: block;
  }

  .block_video_image_text .video_empty {
    height: 100%;
    background-color: #eef0f5;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .block_video_image_text .video_text {
    position: absolute;
    box-sizing: border-box;
    padding: 40px;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    color: #fff;
    z-index: 20;
    pointer-events: none;
  }

  .block_video_image_text .video_text .video_text_content {
    font-family: var(--title_font_family);
    letter-spacing: 0.025em;
    line-height: 1.6;
    pointer-events: auto;
  }

  .block_video_image_text .video_text .video_text_content .video_title {
    font-size: var(--font-size);
    font-weight: 500;
    line-height: 1.2;
  }

  @media screen and (max-width: 767px) {
    .block_video_image_text .video_text .video_text_content .moble-video-title {
      font-size: calc(var(--font-size) * 0.75) !important;
    }
    .block_video_image_text .video_text .video_text_content .subheading {
      margin-top: 6px;
      margin-bottom: 14px;
    }
  }

  .block_video_image_text .video_text .video_text_content .subheading {
    font-size: 16px;
    line-height: 1.7;
    margin-top: 8px;
    margin-bottom: 16px;
  }

  .block_video_image_text .video_text .video_text_content .btn {
    display: inline-block;
    background-color: transparent !important;
    color: #fff !important;
    border: 2px solid #fff !important;
    padding: 8px 12px;
    font-size: 1rem;
    line-height: 1.5;
    font-size: 16px;
    pointer-events: auto;

  }

  .block_video_image_text .block_video-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
    pointer-events: none;
  }

  .block_video_image_text .center-center {
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .block_video_image_text .center-left {
    align-items: center;
    justify-content: start;
    text-align: left;
  }

  .block_video_image_text .center-right {
    align-items: center;
    justify-content: flex-end;
    text-align: right;
  }

  .block_video_image_text .bottom-left {
    align-items: flex-end;
    justify-content: start;
    text-align: left;
  }

  .block_video_image_text .bottom-center {
    align-items: flex-end;
    justify-content: center;
    text-align: center;
  }

  .block_video_image_text .bottom-right {
    align-items: flex-end;
    justify-content: flex-end;
    text-align: right;
  }
{% endstylesheet %}

<div
  class="block_video_image_text pc_height mobile_height"
  style="--pc-height: {{section.settings.pc_height }} ;--mobile-height: {{section.settings.mobile_height}};"
>
  <div class="block_video_content">
	{% if section.settings.custom_video.video_src == "" %}
		{% if section.settings.video_url.model != '' %}
		<div id="iframe_{{ block_id | default : section.block_id }}"></div>
		{% else %}
		<div class="video_empty">
			{% include 'icon_video', width: '100', height: '100' %}
		</div>
		{% endif %}
	{% else %}
	<video class="custom_video" playsinline webkit-playsinline id="custom_video-{{ block_id | default : section.block_id }}"
    {% if section.settings.is_control %}controls{% endif %}
     {% if section.settings.is_autoplay %}autoplay playsinline{% endif %}  
     {% if section.settings.is_loop_play %}loop{% endif %} 
     {% if section.settings.is_mute %}muted{% endif %}
     src="{{ section.settings.custom_video.video_src|public_front_asset_url }}"></video>
	{% endif %}
  </div>
  <div
    class="block_video-mask"
    style="background-color:#000;opacity: {{ section.settings.mask | divided_by : 100  }};"
  ></div>

  <div class="video_text {{section.settings.text_algin}}">
    <div class="video_text_content">
      {% if section.settings.title != '' %}
        <h2
          class="video_title animation-contents {% if section.settings.title_size > 40 %} moble-video-title {% endif %}"
          style="--font-size: {{section.settings.title_size}}px"
        >
          {{ section.settings.title }}
        </h2>
      {% endif %}
      {% if section.settings.subheading != '' %}
        <div class="subheading animation-contents">
          {{ section.settings.subheading|html_content_filter }}
        </div>
      {% endif %}
      {% if section.settings.link_text != '' %}
        <a href="{{section.settings.link | setUrlDataFrom:data_from}}" class="btn btn-animate animation-contents">
          {{ section.settings.link_text }}
          <i class="btn-icon"></i>
        </a>
      {% endif %}
    </div>
  </div>
</div>

<script>
     $(function() {

  	{% if section.settings.video_url.model != '' and section.settings.custom_video.video_src == "" %}
  		moi.youtubeVideoPlay('iframe_{{ block_id | default : section.block_id }}', {
  		  height: '{{section.settings.height}}',
  		  width: window.innerWidth,
  		  videoId: '{{section.settings.video_url.id}}',
  		  playerVars: {
          {% if section.settings.is_mute %}
            mute: 1,
          {% else %}
            mute: 0,
          {% endif %}
			    controls: 0
  		  },
  		  events: {
			onReady: function (event) {
				{% if section.settings.is_autoplay %}
				  event.target.playVideo();
				{% endif %}
			},
			onStateChange: function (event) {
			{% if section.settings.is_loop_play %}
			  if (event.data === 0) {
				event.target.playVideo();
			  }
			{% endif %}
			}
  		  },
  		});
     {% endif %}
  })
</script>

{% schema %}
{
  "tag": "",
  "class": "block_video",
  "icon": "icon-shipinliebiao",
  "is_global": false,
  "name": {
    "zh_CN": "视频图文",
    "en_US": "Video text"
  },
  "max_blocks": "0",
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置",
        "en_US": "Settings"
      }
    },
    {
      "type": "card_input",
      "id": "title",
      "label": {
        "zh_CN": "标题",
        "en_US": "Title"
      },
      "placeholder": {
        "zh_CN": "标题",
        "en_US": "Title"
      },
      "default": "Bring your <br/>brand to lif"
    },
    {
      "type": "card_text_editor",
      "label": {
        "zh_CN": "描述",
        "en_US": "Description"
      },
      "id": "subheading",
      "default": "LEARN MORE"
    },
    {
      "type": "card_slider",
      "label": {
        "zh_CN": "标题字体大小",
        "en_US": "Title font size"
      },
      "id": "title_size",
      "max": 100,
      "min": 40,
      "default": 40
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "按钮文字",
        "en_US": "Button text"
      },
      "id": "link_text",
      "default": ""
    },
    {
      "type": "card_page_link",
      "label": {
        "zh_CN": "按钮链接",
        "en_US": "Button link"
      },
      "default": {
        "type": "",
        "title": "",
        "url": ""
      },
      "id": "link"
    },
    {
      "type": "card_select",
      "label": {
        "zh_CN": "文字位置",
        "en_US": "Text position"
      },
      "default": "center-center",
      "id": "text_algin",
      "option": [
        {
          "label": {
            "zh_CN": "中左",
            "en_US": "Center-left"
          },
          "value": "center-left"
        },
        {
          "label": {
            "zh_CN": "中间",
            "en_US": "In the middle"
          },
          "value": "center-center"
        },
        {
          "label": {
            "zh_CN": "中右",
            "en_US": "Center-right"
          },
          "value": "center-right"
        },
        {
          "label": {
            "zh_CN": "下左",
            "en_US": "Lower left"
          },
          "value": "bottom-left"
        },
        {
          "label": {
            "zh_CN": "下中",
            "en_US": "Lower middle"
          },
          "value": "bottom-center"
        },
        {
          "label": {
            "zh_CN": "下右",
            "en_US": "Down right"
          },
          "value": "bottom-right"
        }
      ]
    },
    {
      "type": "card_image",
      "label": {
        "zh_CN": "本地视频",
        "en_US": "Local video"
      },
      "default": {
        "src": "",
        "alt": "",
        "video_src": ""
      },
      "info": {
        "zh_CN": ""
      },
      "card_type": "video",
      "id": "custom_video"
    },
    {
      "type": "card_video",
      "error": {
        "zh_CN": "输入地址错误",
        "en_US": "Wrong address entered"
      },
      "rule": ["youtube"],
      "label": {
        "zh_CN": "视频链接",
        "en_US": "Video link"
      },
      "placeholder": {
        "zh_CN": "请输入Youtube视频的URL",
        "en_US": "Please enter the URL of the Youtube video"
      },
      "info": {
        "zh_CN": "仅支持Youtube，请输入完整链接例如：https://www.youtube.com/watch?v=XXXXXX",
        "en_US": "Only support Youtube, please enter the complete links such as: https://www.youtube.com/watch?v=XXXXXX"
      },
      "id": "video_url"
    },
    {
      "type": "card_select",
      "label": {
        "zh_CN": "PC端高度",
        "en_US": "PC height"
      },
      "default": "550px",
      "id": "pc_height",
      "option": [
        {
          "label": {
            "zh_CN": "450px",
            "en_US": "450px"
          },
          "value": "450px"
        },
        {
          "label": {
            "zh_CN": "550px",
            "en_US": "550px"
          },
          "value": "550px"
        },
        {
          "label": {
            "zh_CN": "650px",
            "en_US": "650px"
          },
          "value": "650px"
        },
        {
          "label": {
            "zh_CN": "750px",
            "en_US": "750px"
          },
          "value": "750px"
        },
        {
          "label": {
            "zh_CN": "全屏",
            "en_US": "Full screen"
          },
          "value": "100vh"
        }
      ]
    },
    {
      "type": "card_select",
      "label": {
        "zh_CN": "移动端高度",
        "en_US": "Mobile height"
      },
      "default": "300px",
      "id": "mobile_height",
      "option": [
        {
          "label": {
            "zh_CN": "250px",
            "en_US": "250px"
          },
          "value": "250px"
        },
        {
          "label": {
            "zh_CN": "300px",
            "en_US": "300px"
          },
          "value": "300px"
        },
        {
          "label": {
            "zh_CN": "400px",
            "en_US": "400px"
          },
          "value": "400px"
        },
        {
          "label": {
            "zh_CN": "500px",
            "en_US": "500px"
          },
          "value": "500px"
        },
        {
          "label": {
            "zh_CN": "全屏",
            "en_US": "Full screen"
          },
          "value": "100vh"
        }
      ]
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "自动播放",
        "en_US": "Autoplay"
      },
      "default": true,
      "id": "is_autoplay"
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "循环播放",
        "en_US": "Loop play"
      },
      "default": true,
      "id": "is_loop_play"
    },
    {
      "type": "card_switch", 
      "label": {
        "zh_CN": "控制播放",
        "en_US": "Control play"
      },
      "default": true,
      "id": "is_control"
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "默认静音",
        "en_US": "Default mute"
      },
      "default": true,
      "id": "is_mute"
    },
    {
      "type": "card_slider",
      "label": {
        "zh_CN": "蒙层透明度",
        "en_US": "Mask transparency"
      },
      "id": "mask",
      "max": "100",
      "min": "0",
      "default": "20"
    }
  ],
  "blocks": [],
  "default": {
    "settings": {
      "custom_video": {
        "src": "",
        "alt": "",
        "video_src": ""
      },
      "mask": 20,
      "title": "Bring your <br/>brand to lif",
      "title_size": 40,
      "subheading": "Seamless hero videos",
      "link_text": "LEARN MORE",
      "link": {
        "type": "",
        "title": "",
        "url": ""
      },
      "pc_height": "550px",
      "mobile_height": "300px",
      "is_autoplay": false,
      "is_loop_play": false,
      "is_mute": false,
      "video_url": {
        "value": "",
        "id": "",
        "model": ""
      },
      "text_algin": "center-center"
    },
    "blocks": []
  }
}
{% endschema %}
